<template>
  <div class="cooperation">
    <div class="f20 mt20 text-center">加入我们，共创财富生活</div>
    
    <ul class="cooper-list">
      <li>普通代理</li>
      <li>区县代理</li>
      <li>市级代理</li>
      <li>省级代理</li>
      <li>OEM代理</li>
    </ul>
    
    <div class="need">
      <div class="arrow"></div>
      <p class="f20 mt10">一、加盟要求</p>
      <p class="">1、市场区域具有良好的市场客户资源；</p>
      <p class="">2、企业具有完善的销售团队；</p>
      <p class="">3、企业具有营业执照，征信良好，守信用；</p>
      <p class="">4、企业具有一定的售后服务能力；</p>
      <p class="f20 mt10">二、代理商权利</p>
      <p class="">1、约定区域进行我产品市场销售，享有优惠代理价；</p>
      <p class="">2、业务先备案制度，原则不允许跨区域销售；</p>
      <p class="">3、代理商通过代理商管理系统进行管理；</p>
      <p class="f20 mt10">三、保证金不需要。</p>
    </div>
    
    <div class="text-center">
      <Button type="primary" to="cooperationStart">申请合作</Button>
    </div>
    
    
  </div>
</template>

<script>
  export default {
    mounted () {
      this.$store.commit('UPDATE_POSITION', this.position)
    },
    data () {
      return{
        position: [
          {title: '我的账户', link: '/admin/myAccount'},
          {title: '我要合作'}
        ]
      }
    },
    methods:{
     
    }
  }
</script>

<style lang="less" scoped>
.cooper-list {
  margin-top:30px;
  overflow: hidden;
  li {
    width: 20%;
    float: left;
    height: 200px;
    background: url(../../assets/images/admin/bg00232.jpg) no-repeat top center;
    background-size: 160px 180px;
    text-align: center;
    font-size: 24px;
    line-height: 200px;
    color: #fff;
    transition: all 0.3s;
    &:hover{
      background-size: 160px 200px;
    }
  }
}
.need{
  line-height: 1.6;
  background: #f2f3f4;
  margin:20px 30px;
  padding: 20px;
  position: relative;
  .arrow{
    position: absolute;
    border:16px solid #f2f3f4;
    border-left-color: transparent;
    border-top-color: transparent;
    transform: rotate(-135deg);
    top:-14px;
    left:50%;
    
  }
}
</style>
